<template>
  <div class="padding flex direction-column width-100 height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="所属区域">
          <area-picker v-model="areaCode"></area-picker>
        </el-form-item>
        <el-form-item label="企业名称">
          <el-select v-model="tenantId" filterable clearable>
            <el-option v-for="enterprise in enterpriseList" :key="enterprise.id" :label="enterprise.name"
              :value="enterprise.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年能耗等级">
          <dictionary-picker v-model="energyConsumptionLevel" dic-code="NENG_HAO_SHUI_PING"></dictionary-picker>
        </el-form-item>
        <el-form-item label="填报状态">
          <el-select v-model="reportState" filterable clearable>
            <el-option v-for="item in reportStateList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          <el-button type="primary" icon="el-icon-download" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="loading" class="table" :data="lists" height="100%" :header-cell-style="{
      color: 'white',
      backgroundColor: themeColor
    }">
      <div slot="empty" class="empty-lists">
        <svg-icon name="search"></svg-icon>
        <span class="empty-text">暂无数据</span>
      </div>
      <el-table-column v-for="column in columns" :key="column.prop" v-bind="column">
        <template v-if="/^\d{4}$/.test(column.prop)" #default="{ row, column: col }">
          <el-link :type="getLinkType(row[column.prop])" :underline="false" :disabled="getLinkDisabled(row[column.prop])"
            @click="clickLink(row, col)">
            {{ statusText(row[column.prop]) }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Mixin from './mixin'
import { governmentLoadReport, loadEnergyReportFile } from '@/api/energyReport'
import {
  TABLE_UNDER_REPORT_TEXT,
  TABLE_REPORTED_TEXT,
  TABLE_RESOLVED_TEXT,
  TABLE_REJECTED_TEXT,
  TABLE_REPORTED,
  TABLE_UNDER_REPORT
} from '@/config'
import { simpleAoa2Sheet } from '@/utils/sheet'
import AreaPicker from '@/components/area-picker'
import DictionaryPicker from '@/components/dictionary-picker'

export default {
  name: 'government',
  components: { AreaPicker, DictionaryPicker },
  mixins: [Mixin],
  data() {
    return {
      areaCode: '',
      tenantId: '',
      energyConsumptionLevel: '',
      reportState: '',
      reportStateList: [
        { label: TABLE_UNDER_REPORT_TEXT, value: TABLE_UNDER_REPORT },
        { label: TABLE_REPORTED_TEXT, value: TABLE_REPORTED },
      ]
    }
  },
  computed: {
    enterpriseList() {
      return this.$store.state.energyEnterpriseList
    },
    enterpriseText() {
      const enterprise = this.tenantId
      const enterpriseList = this.enterpriseList
      return (enterpriseList.find(v => +v.id === +enterprise) || {}).name
    }
  },
  mounted() {
    this.$store.dispatch('GET_ENTERPRISE_LIST')
  },
  methods: {
    search() {
      this.queryLists()
    },
    statusText(s) {
      // ’‘、未上报、未上报、已上报、已通过、已退回
      const status = ['', TABLE_UNDER_REPORT_TEXT, TABLE_UNDER_REPORT_TEXT, TABLE_REPORTED_TEXT, TABLE_RESOLVED_TEXT, TABLE_REJECTED_TEXT]
      return status[s] || status[0]
    },
    getLinkType(s) {
      // ’‘、未上报、未上报、已上报、已通过、已退回
      const types = ['', 'warning', 'warning', 'primary', 'success', 'danger']
      return types[s] || types[0]
    },
    getLinkDisabled(s) {
      return String(s) !== TABLE_REPORTED
    },
    async clickLink(row, col) {
      const year = +col.property
      const tenantId = +row.id
      const enterpriseName = row.name || ''
      const fileName = `${enterpriseName}${year}年能源利用状况报告.xlsx`
      const { data: url } = await loadEnergyReportFile(tenantId, year)
      if (url) {
        this.download(url, fileName, false)
      }
    },
    exportExcel() {
      const columns = this.columns
      const enterpriseName = this.enterpriseText || ''
      const fileName = `${enterpriseName}各年份能源利用状况报告填报情况一览表.xlsx`
      const headers = columns.map(v => v.label)
      const lists = this.lists
      const aoa = [
        headers,
        ...lists.map(v => {
          return columns.map(vv => {
            return /^\d{4}$/.test(vv.prop)
              ? this.statusText(v[vv.prop])
              : (v[vv.prop] || '');
          })
        })
      ]
      simpleAoa2Sheet(aoa, fileName)
    },
    queryLists() {
      this.loading = true
      const params = {
        tenantId: this.tenantId || '',
        regionCode: this.areaCode,
        energyLevel: this.energyConsumptionLevel,
        reportStatus: this.reportState,
      }
      return governmentLoadReport(params).then(res => {
        res.data = res.data || []
        this.lists = res.data
      }).finally(() => {
        this.loading = false
      })
    },
  }
}
</script>
